<template>
    <div class="order">
        <div class="pageTop">
            <img src="../../static/images/back.png" class="backIcon" @click="backFunction" />
        </div>

        <div class="addressMsg">
            <div class="homeIcon">
                <img src="../../static/images/home.png" class="homeImg" />
            </div>
            <div class="fontMsg">
                <span class="name">张三</span>
                <span class="phoneNum">17639289054</span>
                <span class="address">河南省 焦作市 山阳区 文苑街道</span>
            </div>
        </div>


        <div v-for="goods in goodslist">
            <div class="goodsitem" :key="goods.id">
                <img :src="$host+goods.url" class="goodsimg" />
                <!--內容-->
                <div class="content">
                    <!--商品名稱-->
                    <div class="goodsname">
                        {{goods.name}}
                    </div>

                    <div class="buy">
                        <span class="price"><sub style="font-size: 0.24rem;">￥</sub>{{goods.price}}</span>
                        <span>
                            <span class="jian" @click="jian(goods)">-</span>
                            <span class="gnum">{{goods.num}}</span>
                            <span class="jia" @click="sum(goods)">+</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="sumPrice">
            合计:
            <span style="color:red">￥</span>
            <span class="fontPrice">{{total}}</span>
        </div>

        <div class="btn" @click="toorder">立即下单</div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            goodslist: []
        }
    },
    computed: {
        total: function () {
            let money = 0;
            this.goodslist.forEach(el => {
                money += parseInt(el.num) * parseFloat(el.price);
            })
            return money;
        }
    },
    created() {
        //取缓存 
        let carlist = localStorage.getItem("carlist");
        if (carlist) {
            this.goodslist = JSON.parse(carlist);
        }
    },
    methods: {
        getUuid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (Math.random() * 16) | 0,
                    v = c == 'x' ? r : (r & 0x3) | 0x8;
                return v.toString(16);
            });
        },
        backFunction() {
            this.$router.push("/");
        },
        toorder() {
            let orderNum = this.getUuid()
            let order = {
                "mid": "1",
                "nickName": "张三",
                "siteName": "阿五遍历店",
                "siteMobile": "152552322",
                "siteAddress": "郑州市高新区",
                "reciveUser": "莉莉",
                "reciveMobile": "1365555",
                "orderNum": orderNum
            };
            order.payable = this.total;
            order.pay = this.total;
            let od = [];
            this.goodslist.forEach(el => {
                let tmp = {};
                tmp.gid = el.id;
                tmp.goodsname = el.name;
                tmp.price = el.price;
                tmp.num = el.num;
                od.push(tmp);
            })
            order.orderDetail = od;

            //保存
            this.$http.post("/v1/order/save", order)
                .then(res => {
                    if (res.code == 200) {
                        alert("下单成功")
                    }
                })
        }
    }
}
</script>

<style scoped="scoped">
.order {
    width: 7.1rem;
    height: 100%;
    background-color: #fff;
    margin: auto;
}

.goodsimg {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.2rem;
    float: left;
}

.pageTop {
    padding-top: 5px;
    padding-bottom: 3px;
    border-bottom: #ccc 1px solid;
    padding-left: 8px;
}

.backIcon {
    width: 25px;
    height: 25px;
}

.addressMsg {
    display: flex;
    padding: 5px 0px;
    border-bottom: #ccc 1px solid;
}

.fontMsg {
    padding-left: 10px;
}

.fontMsg .name {
    font-weight: 900;
    font-size: 20px;
}

.fontMsg .phoneNum {
    font-weight: 300;
    font-size: 15px;
}

.fontMsg .address {
    display: block;
    margin-top: 4px;
    font-weight: 500;
}

.homeIcon {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(235, 145, 10);
    padding: 5px;
    margin: 6px;
}

.homeImg {
    width: 30px;
    height: 30px;
}

.jian {
    border: #f00 solid 1px;
    width: 0.3rem;
    height: 0.3rem;
    display: inline-block;
    text-align: center;
    line-height: 0.3rem;
    color: #f00;
}

.gnum {
    display: inline-block;
    width: 0.6rem;
    text-align: center;
}

.jia {
    background-color: #FF0000;
    color: #fff;
    width: 0.3rem;
    height: 0.3rem;
    display: inline-block;
    text-align: center;
    line-height: 0.3rem;
    margin-right: 0.1rem;
}

.goodsitem {
    width: 7.1rem;
    height: 2.2rem;
    border-style: none;
    border-bottom: #ccc dashed 1px;
    background-color: #fff;
}

.caritem {
    width: 7.1rem;
    height: 2.2rem;
    border-style: none;
    border-bottom: #ccc dashed 1px;
    display: flex;
    align-items: center;
}

.goodsimg {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.2rem;
    float: left;
}

.carimg {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.2rem;
    float: left;
}

.content {
    width: 5.1rem;
    height: 1.8rem;
    margin-top: 0.2rem;
    margin-left: 0.15rem;
    float: left;
}

.goodsname {
    height: 0.8rem;
    line-height: 0.8rem;
    font-weight: bold;
}

.tags {
    height: 0.5rem;
    line-height: 0.5rem;
}

.tag {
    background-color: #FF0000;
    color: #fff;
    margin-left: 0.1rem;
    font-size: 0.18rem;
    padding: 0.03rem 0.06rem;
    border-radius: 0.1rem;
}

.buy {
    height: 0.5rem;
    line-height: 0.5rem;
    display: flex;
    justify-content: space-between;
}

.price {
    color: #FF0000;
    font-size: 0.32rem;
}

.car {
    background-color: #f00;
    color: #fff;
    padding: 0 0.1rem;
    font-size: 0.24rem;
    border-radius: 0.25rem;
    margin-right: 0.1rem;
}

.sumPrice {
    height: 50px;
    line-height: 20px;
    font-size: 15px;
    font-weight: 600;
    padding: 5px;
}

.sumPrice .fontPrice {
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    font-weight: 500;
    color: red;
}

.btn {
    width: 6rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    color: #fff;
    background-color: #f00;
    margin: 0.5rem auto;
    border-radius: 0.35rem;
}
</style>
